<template>
    <div class="geo-location">
        <input type="search" name="" id="" v-model="city" placeholder="请输入要搜索的城市名称" @change="getData()">
    </div>
</template>
<script>
import axios from 'axios';
import { API_CITY, KEY } from '@/common/constrant';
// import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'

export default {
    data(){
        return{
            "city":""
        }
    },
    methods:{
    //     ...mapMutations([
    //     "updateLocationMutation"
    //   ]),
      ...mapActions([
        "updateLocationAction"
      ]),
        getData(){
            axios.get(API_CITY,{
                params:{
                    key: KEY,
                    location:this.city
                }
            }).then(res=>{
                console.log(res.data)
                this.updateLocationAction(res.data.location[0])
                // this.$store.dispatch("updateLocationAction",res.data.location[0])
                // this.$store.commit("updateLocationMutation",res.data.location[0])
                // this.updateLocationMutation(res.data.location[0])
                console.log(this.$store.state.location)
            })
        }
    },
    // mounted(){
    //     this.getData()
    // }
}
</script>
<style scoped>

</style>
